<template>
  <ul class="fa-widgets">
    <li
      v-for="item in list"
      :key="item.type"
      class="fa-widgets__item"
      :class="[`actor-${actorColor}`, widgetDisable(item) && 'is-disabled']"
    >
      <div class="fa-widgets__item-box" :draggable="!widgetDisable(item)" @dragstart="dragWidget($event, item)">
        <i class="fa-widgets__item-icon" :class="item.icon"></i>
      </div>
      <div class="fa-widgets__item-text">{{ item.name }}</div>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue'
import { Widget } from '@/models'
import { WidgetStyle, WidgetType, ActorData, WidgetOption, WidgetData } from '@/types'

/** 控件列表 */
export default defineComponent({
  name: 'FaWidgets',

  props: {
    /** 控件列表 */
    widgets: {
      type: Array as PropType<WidgetOption[]>,
      default: () => Widget.getWidgetOptions()
    },

    /** 控件风格: 签署/填写，未设置则显示所有控件 */
    widgetStyle: {
      type: String as PropType<WidgetStyle | 'sign' | 'fill'>
    },

    /** 过滤展示的控件 */
    filter: {
      type: Function as PropType<(item: WidgetOption) => boolean | void>
    },

    /** 控件参与方 */
    actor: {
      type: Object as PropType<ActorData>
    },

    /** 控件拖动前 */
    beforeDrag: {
      type: Function as PropType<(e: DragEvent, data: WidgetData) => void>
    },

    /** 控件是否禁用 */
    widgetDisable: {
      type: Function as PropType<(item: WidgetOption) => boolean>,
      default: () => false
    }
  },

  setup(props) {
    return {
      /** 可见的控件列表 */
      list: computed(() => {
        let { widgets, widgetStyle: style } = props
        const { actor } = props

        /** 签署控件 */
        if (style === WidgetStyle.SIGN || actor?.fill === false) {
          widgets = widgets.filter(item => item.style !== WidgetStyle.FILL)
        }

        /** 填写控件 */
        if (style === WidgetStyle.FILL || actor?.sign === false) {
          widgets = widgets.filter(item => item.style !== WidgetStyle.SIGN)
        }

        /** 个人屏蔽印章控件 */
        if (actor?.isPerson) {
          widgets = widgets.filter(item => item.type !== WidgetType.SEAL)
        }

        return props.filter ? widgets.filter(option => props.filter?.(option)) : widgets
      }),

      /** 参与方颜色 */
      actorColor: computed(() => Widget.getActorColor(props.actor?.index ?? -1)),

      /** 控件拖拽 */
      dragWidget: (e: DragEvent, item: WidgetOption) => {
        const data = {
          type: item.type,
          actor: props.actor
        } as WidgetData

        props.beforeDrag?.(e, data)

        Widget.setWidgetTransfer(e, data)
      }
    }
  }
})
</script>

<style lang="scss">
.fa-widgets {
  margin: 0;
  padding: 8px;

  &__item {
    $size: 56px;
    display: inline-block;
    width: $size;
    margin: 8px;
    text-align: center;
    list-style: none;

    &-box {
      display: block;
      box-sizing: border-box;
      height: $size;
      text-decoration: none;
      border: $border-solid;
      border-radius: 2px;
      // 兼容 IE
      cursor: move;
      cursor: grab;
    }

    &-icon {
      display: block;
      color: $color-text-secondary;
      font-size: 20px;
      line-height: $size - 2px;
    }

    &-text {
      margin-top: 4px;
      color: $color-text-secondary;
      font-size: 12px;
      line-height: 1.5;
    }

    // 禁用的控件
    &.is-disabled .fa-widgets__item {
      &-box {
        border-color: $border-color !important;
        cursor: not-allowed;
      }

      &-text,
      &-icon {
        color: $color-text-disabled !important;
      }
    }
  }
}

// 参与方颜色样式
@each $c, $color in $actor-colors {
  .fa-widgets__item.actor-#{$c} .fa-widgets__item-box:hover {
    border-color: rgba($color, 0.8);

    .fa-widgets__item-icon {
      color: $color;
    }
  }
}
</style>
